<template>
    <div v-if="gameListStatus == 'error'">
        <component-page-loading :status="gameListStatus" @reload="getGameList"></component-page-loading>
    </div>
    <el-select v-else :placeholder="placeholder || $t('game.setting.game.name')"
               :multiple="multiple" :collapse-tags="collapseTags" :filterable="filterable"
               :size="size" :clearable="clearable" v-model="dataCache.gameCode" @change="filterChange">
        <el-option-group v-for="(group,key) in gameList" :key="key" :label="toUpper(key)">
            <el-option v-for="game in group" :key="game.code" :value="game.code"
                       :label="$te(`game.setting.game.games.${game.code}.label`) ? $t(`game.setting.game.games.${game.code}.label`) : game.name"></el-option>
        </el-option-group>
    </el-select>
</template>

<script>
export default {
    name: "PageGameOption",
    model: {
        prop: 'gameCode',
        event: 'change'
    },
    props: {
        withTrashed: {
            type: Boolean,
            default: true
        },
        size: {
            type: String,
            default: null
        },
        gameCode: {
            type: [String, Array],
            default: null
        },
        multiple: {
            type: Boolean,
            default: true
        },
        collapseTags: {
            type: Boolean,
            default: true
        },
        filterable: {
            type: Boolean,
            default: true
        },
        clearable: {
            type: Boolean,
            default: true
        },
        placeholder: String
    },
    data() {
        return {
            gameListStatus: 'dle',
            gameList: [],
            dataCache: {
                gameCode: null,
            },
        }
    },
    watch: {
        // 外部改变数据
        gameCode: {
            immediate: true,
            handler: function (n, o) {
                if (n != o) {
                    this.dataCache.gameCode = n;
                }
            }
        }
    },
    created() {
        // 获取游戏数据
        this.getGameList();
    },
    methods: {
        toUpper(key) {
            return _.toUpper(key);
        },
        // 获取游戏数据
        getGameList() {
            this.gameListStatus = 'loading';
            axios.get('/common/getGameList', {
                params: {withTrashed: this.withTrashed ? 1 : 0}
            }).then((response) => {
                if (response.data.resp_msg.code == 200) {
                    this.gameList = response.data.resp_data;
                    this.gameListStatus = _.isEmpty(this.gameList) ? 'nodata' : 'dle';
                } else {
                    this.gameListStatus = 'error';
                }
            })
        },
        // 点击选中数据
        filterChange(gameCode) {
            // 对外广播事件
            this.$emit('change', gameCode || null);
        },
    },
}
</script>

<style scoped>

</style>
